import React from 'react';
import { connect } from 'dva';
import { Tabs, List, Icon, SegmentedControl, WhiteSpace, WingBlank, ListView, SearchBar } from 'antd-mobile';
import MyIcon from '../components/Base/MyIcon';
import moment from 'moment';
import styles from './MyTasksRank.less';
import classnames from 'classnames';

const TabPane = Tabs.TabPane;
const ListItem = List.Item;


class MyTasksRank extends React.Component {

  state = {
    sort1: 'value',
    sort2: 'value',
  }

  componentWillMount() {
    const { branchNo } = this.props.auth.currentUser;
    const { branchPickerValue } = this.props.stat;
    const startDate = moment(branchPickerValue[1]).startOf('month').format('YYYY-MM-DD');
    const endDate = moment(branchPickerValue[1]).add(1, 'months').startOf('month').format('YYYY-MM-DD');
    this.props.dispatch({
      type: 'stat/fetchStatTasks',
      payload: { branchNo, startDate, endDate },
    });
  }

  getFlag = (v) => {
    switch (v) {
      case 1:
        return <img src={require('../assets/crown1.png')} alt="" />;
      case 2:
        return <img src={require('../assets/crown2.png')} alt="" />;
      case 3:
        return <img src={require('../assets/crown3.png')} alt="" />;
      default:
        return v;
    }
  };

  sortDate = (data, sort) => {
    let arr = data;
    arr = arr.sort((a, b) => b[sort] - a[sort]);
    return arr;
  }

  changeSort = (key, value) => {
    this.setState({
      [key]: value,
    });
  }

  showKey = (data) => {
    let str = '';
    switch (data) {
      case 'value':
        str = '完成率';
        break;
      case 'cv':
        str = '回访人数';
        break;
      case 'sv':
        str = '转化人数';
        break;
      case 'money':
        str = '转化金额';
        break;
    }
    return str;
  }

  body1 = (data) => {
    const { sort1 } = this.state;
    const { branchPickerValue } = this.props.stat;
    return (
      <div>
        <div className={styles.top}>
          按{this.showKey(sort1)}从高到低排列
          <span className={styles.right}>{moment(branchPickerValue[1]).format('YYYY-MM')}</span>
        </div>
        <div className={[styles.flex, styles.header].join(' ')}>
          <div className={styles.section1}>排名</div>
          <div className={styles.section2}>姓名</div>
          <div
            className={classnames({
              [styles.section2]: true,
              [styles.active]: sort1 === 'cv',
            })} onClick={this.changeSort.bind(this, 'sort1', 'cv')}
          >回访人数<MyIcon type="arrow-down" size="xxs" /></div>
          <div
            className={classnames({
              [styles.section2]: true,
              [styles.active]: sort1 === 'value',
            })} onClick={this.changeSort.bind(this, 'sort1', 'value')}
          >完成率<MyIcon type="arrow-down" size="xxs" /></div>
        </div>

        {
          this.sortDate(data, sort1).map((item, index) => {
            return (
              <div className={styles.flex} key={index}>
                <div className={styles.section1}>{this.getFlag(index + 1)}</div>
                <div className={styles.section2}>{item.name}</div>
                <div className={styles.section2}>{item.cv}</div>
                <div className={styles.section2}>{(item.value || 0).toFixed(2)}%</div>
              </div>
            );
          })}
      </div>

    );
  }

  body2 = (data) => {
    const { sort2 } = this.state;
    return (
      <div>
        <div className={styles.top}>
          按{this.showKey(sort2)}从高到低排列
          <span className={styles.right}>本月({moment().format('YYYY.MM')})</span>
        </div>
        <div className={[styles.flex, styles.header].join(' ')}>
          <div className={styles.section1}>排名</div>
          <div className={styles.section2}>姓名</div>
          <div
            className={classnames({
              [styles.section2]: true,
              [styles.active]: sort2 === 'sv',
            })} onClick={this.changeSort.bind(this, 'sort2', 'sv')}
          >转化人数<MyIcon type="arrow-down" size="xxs" /></div>
          <div
            className={classnames({
              [styles.section2]: true,
              [styles.active]: sort2 === 'money',
            })} onClick={this.changeSort.bind(this, 'sort2', 'money')}
          >转化金额<MyIcon type="arrow-down" size="xxs" /></div>
          <div
            className={classnames({
              [styles.section2]: true,
              [styles.active]: sort2 === 'value',
            })} onClick={this.changeSort.bind(this, 'sort2', 'value')}
          >转化率<MyIcon type="arrow-down" size="xxs" /></div>
        </div>

        {
          this.sortDate(data, sort2).map((item, index) => {
            return (
              <div className={styles.flex} key={index}>
                <div className={styles.section1}>{this.getFlag(index + 1)}</div>
                <div className={styles.section2}>{item.name}</div>
                <div className={styles.section2}>{item.sv}</div>
                <div className={styles.section2}>{(item.money || 0).toFixed(2)}</div>
                <div className={styles.section2}>{(item.value || 0).toFixed(2)}%</div>
              </div>
            );
          })}
      </div>

    );
  }

  render() {
    const { rank } = this.props.stat.statTasks;
    return (
      <div className={styles.tab}>
        <Tabs defaultActiveKey="1" swipeable={false}>
          <TabPane tab="回访完成率" key="1">
            {
              rank && rank.rank1 &&
              this.body1(rank.rank1)}
          </TabPane>
          <TabPane tab="转化成功率" key="2">
            {
              rank && rank.rank2 &&
              this.body2(rank.rank2)
            }
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default connect(({ auth, stat }) => ({ auth, stat }))(MyTasksRank);
